<template>

  <div class="app-container">
    <div class="d1">社保缴费</div>
    <div style="margin: 0px auto">
      <!-- 表格 -->
      <el-table
        v-loading="listLoading"
        :data="list1"
        border
        element-loading-text="数据加载中"
        fit
        highlight-current-row
        @selection-change="handleSelectionChange"
        :row-class-name="tableRowClassName">

        <!--        <el-table-column align="center" label="序号" width="70">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{-->
        <!--              (teacherQuery.page - 1) * teacherQuery.limit + scope.$index + 1-->
        <!--            }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column align="center" label="险种" width="100">
          <template slot-scope="scope">
            {{ scope.row.insurance }}
          </template>
        </el-table-column>


        <el-table-column align="center" label="个人缴纳金额" width="130">
          <template slot-scope="scope">
            {{ scope.row.person }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="公司缴纳金额" width="130">
          <template slot-scope="scope">
            {{ scope.row.company }}
          </template>
        </el-table-column>


        <el-table-column align="center" label="操作" width="200">

          <template slot-scope="scope">

            <el-button type="info" size="mini" @click="handleEdit(scope.row)">
              编辑 <i class="el-icon-edit"></i>
            </el-button>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="d1">公积金缴费</div>
    <div style="margin: 0px auto">
      <!-- 表格 -->
      <el-table
        v-loading="listLoading"
        :data="list2"
        border
        element-loading-text="数据加载中"
        fit
        highlight-current-row
        @selection-change="handleSelectionChange"
        :row-class-name="tableRowClassName">

        <!--        <el-table-column align="center" label="序号" width="70">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{-->
        <!--              (teacherQuery.page - 1) * teacherQuery.limit + scope.$index + 1-->
        <!--            }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column align="center" label="险种" width="100">
          <template slot-scope="scope">
            {{ scope.row.insurance }}
          </template>
        </el-table-column>


        <el-table-column align="center" label="个人缴纳金额" width="100">
          <template slot-scope="scope">
            {{ scope.row.person }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="公司缴纳金额" width="100">
          <template slot-scope="scope">
            {{ scope.row.company }}
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作" width="200">

          <template slot-scope="scope">

            <el-button type="info" size="mini" @click="handleEdit(scope.row)">
              编辑 <i class="el-icon-edit"></i>
            </el-button>

          </template>
        </el-table-column>
      </el-table>
    </div>


    <!--    编辑弹窗    -->
    <el-dialog :visible.sync="dialogFormVisible" title="" width="40%">
      <el-form label-width="80px">
        <!-- <el-form-item label="学号">
          <el-input v-model="form.studentNum" autocomplete="off"></el-input>
        </el-form-item> -->
        <el-form-item label="险种">
          <el-input v-model="detailed.insurance" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="个人缴纳金额">
          <el-input v-model="detailed.person" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司缴纳金额">
          <el-input v-model="detailed.company" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" :disabled="saveBtnDisabled" @click="saveOrUpdate">确定</el-button>
      </div>
    </el-dialog>


    <div class="d1">合计金额</div>

    <div>
      <div>
        <div class="d2">个人缴费合计：</div>
        <div class="d3">{{ list1[5].person+list2[2].person }}</div>
      </div>
      <div>
        <div class="d4">公司缴费合计：</div>
        <div class="d5">{{ list1[5].company+list2[2].company }}</div>
      </div>
      <div>
        <div class="d6">全部缴费合计：</div>
        <div class="d7">{{ list1[5].company+list2[2].company+list1[5].person+list2[2].person }}</div>
      </div>

    </div>
    <div style="clear: both;margin: 20px 0px 0px 40px">
    <el-button icon="el-icon-circle-check" type="primary" @click="toubao()">
      投保
    </el-button>

    <el-button icon="el-icon-circle-close" type="warning" @click="toubaoqx()">
      取消投保
    </el-button>
    </div>
  </div>
</template>

<script>
export default {

  data() {    ///定义变量和初始值
    return {
      sid: null,
      list1: [],
      list2: null,
      listLoading: true, // 是否显示loading信息
      total: 0, //总记录数vu
      teacherQuery: {
        page: 1, //当前页
        limit: 5, //每页记录数
      },
      dialogFormVisible: false,
      detailed: {},
      socialDetails: {},
    }
  },

  created() {  //页面渲染之前执行
    this.init()
    this.getList();
  },

  watch: {
    $route(to, from) {
      this.init()
    }
  },

  methods: {

    getList() {
      // this.$axios({
      //   method: 'post',
      //   url:"//studentVue/StudentfindAllormodil",
      //   data:  this.teacherQuery
      // })
      this.$axios
        .get("http://localhost:8007/conference/detailed/findAll/" + this.sid)
        .then((response) => {
          this.list1 = response.data.data.list1;
          this.list2 = response.data.data.list2;
          this.listLoading = false  //记得：否显示loading信息
        }) //请求成功
        .catch((error) => {
          console.log(error);
        }); //请求失败
    },

//路由切换/导航切换（代码抽取）
    init() {
      this.sid = this.$route.params.sid
      this.socialDetails.sid = this.$route.params.sid
    },

    tableRowClassName({row, rowIndex}) {
      if (row.did % 2 === 1) {
        return 'warning-row';
      } else if (row.did % 2 === 0) {
        return 'success-row';
      }
      return '';
    },

    //点击编辑按钮
    handleEdit(row) {

      // console.log(row)//拿到当前行的所有数据
      console.log(row.sid)//拿到当前行的id

      this.detailed = JSON.parse(JSON.stringify(row))
      this.dialogFormVisible = true
    },
    //保存按钮
    saveOrUpdate() {
      this.saveBtnDisabled = true; //保存按钮是否禁用（避免重复提交）

      this.$axios.post("http://localhost:8007/conference/detailed/updateDetailed", this.detailed)
        .then((response) => {
          // 提示信息
          return this.$message({
            type: "success",
            message: "修改成功!",
          });
        })
        .then((resposne) => {
          //先关闭弹窗
          this.dialogFormVisible = false
          this.saveBtnDisabled = false; //保存按钮是否禁用（避免重复提交）
          this.getList();
          // this.$router.push({ path: "/student/table" });
        })
        .catch((response) => {
          this.$message({
            type: "error",
            message: "修改失败",
          });
        });

    },

    toubao() {
      this.socialDetails.socialstate = 2
      this.toubaoupdate("已成功投保！")
    },
    toubaoqx() {
      this.socialDetails.socialstate = 1
      this.toubaoupdate("已取消投保！")
    },


    toubaoupdate(message) {
      this.$axios.post("http://localhost:8007/conference/social-details/updateSocialDet", this.socialDetails)
        .then((response) => {
          // 提示信息
          return this.$message({
            type: "success",
            message: message,
          });
        })
        .then((resposne) => {
          this.getList();
          // this.$router.push({ path: "/student/table" });
        })
        .catch((response) => {
          this.$message({
            type: "error",
            message: "投保失败！",
          });
        });
    }


  },


}
</script>
<style>

.d1 {
  margin-top: 30px;
  font-size: 22px;
  height: 50px;
  width: 150px;
}
.d2 {
  font-size: 18px;
  float: left;
  margin: 0px 0px 0px 60px;
}
.d3 {
  font-size: 18px;
  float: left;
  margin: 5px 0px 0px 10px;
  color: #ffc71c;
}
.d4 {
  font-size: 18px;
  float: left;
  margin: 0px 0px 0px 60px;
}
.d6 {
  font-size: 18px;
  float: left;
  margin: 0px 0px 0px 60px;
}
.d5 {
  font-size: 18px;
  float: left;
  margin: 5px 0px 0px 10px;
  color: #ffc71c;
}
.d7 {
  font-size: 18px;
  float: left;
  margin: 5px 0px 0px 10px;
  color: #ffc71c;
}
.el-table .warning-row {
  background: #fff;
}

.el-table .success-row {
  background: #eff2f8;
}
</style>
